<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.7.2/dist/css/layui.css" rel="stylesheet">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.7.2/dist/layui.js"></script>

<!-- 你的 HTML 代码 -->

<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="index">首页</a>
            <a href="">订单管理</a>
            <a>
              <cite>订单列表</cite>
            </a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body layui-table-body layui-table-main">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <form class="layui-form">
                                <div class="layui-inline">
                                    <input class="layui-input" name="payNo" id="payNo" autocomplete="off" placeholder="支付单号">
                                </div>
                                <div class="layui-inline">
                                    <input class="layui-input" name="orderNo" id="orderNo" autocomplete="off" placeholder="订单号">
                                </div>
                                <div class="layui-inline">
                                    <input class="layui-input" name="shopName" id="shopName" autocomplete="off" placeholder="店铺名称">
                                </div>
                                <div class="layui-inline">
                                    <input class="layui-input" name="buyerUserName" id="buyerUserName" autocomplete="off" placeholder="收货人">
                                </div>
                                <div class="layui-inline">
                                    <input class="layui-input" name="userPhone" id="userPhone" autocomplete="off" placeholder="手机号码">
                                </div>
                                <div class="layui-inline">
                                    <select id="payStatus" name="userType" class="layui-select" lay-filter="select-type">
                                        <option value="" selected>支付状态</option>
                                        <option value="0">未支付</option>
                                        <option value="1">已支付</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px">
                                    <select id="status" name="status" class="layui-select" lay-filter="select-type">
                                        <option value="" selected>订单状态</option>
                                        <option value="8">待确认</option>
                                        <option value="10">待付款</option>
                                        <option value="20">待备货</option>
                                        <option value="30">备货中</option>
                                        <option value="40">待收货</option>
                                        <option value="45">订单完成(现金支付)</option>
                                        <option value="50">订单关闭</option>
                                        <option value="60">订单完成</option>
                                        <option value="70">交易完成</option>
                                        <option value="90">退款成功</option>
                                        <option value="99">问题订单</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px">
                                    <select id="orderType" name="orderType" class="layui-select" lay-filter="select-type">
                                        <option value="" selected>订单类型</option>
                                        <option value="0">线上</option>
                                        <option value="1">线下</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px">
                                    <select id="orderPayType" name="orderPayType" class="layui-select" lay-filter="select-type">
                                        <option value="" selected>支付方式</option>
                                        <option value="0">在线支付</option>
                                        <option value="1">货到付款</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px">
                                    <select id="addrType" name="addrType" class="layui-select" lay-filter="select-type">
                                        <option value="" selected>配送状态</option>
                                        <option value="0">配送</option>
                                        <option value="1">自提</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px">
                                    <select id="sourceFlag" name="sourceFlag" class="layui-select" lay-filter="select-type">
                                        <option value="" selected>下单来源</option>
                                        <option value="0">pc</option>
                                        <option value="1">android</option>
                                        <option value="2">ios</option>
                                        <option value="3">小程序</option>
                                        <option value="4">微商城</option>
                                        <option value="5">线下</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px;margin-right: 10px"> <div class="layui-inline" > --下单时间-- </div>
                                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                    <input type="text" class="layui-input" id="date1">
                                </div>
                                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                    <p>至</p>
                                </div>
                                <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                    <input type="text" class="layui-input" id="date2">
                                </div>
                                </div>
                                <div class="layui-inline" style="margin-top: 10px">
                                <button type="button" class="layui-btn" data-type="reload" id="selectByLike">搜 索</button>
                                <button type="reset" class="layui-btn" data-type="reload" >重 置</button>
                                <button type="button" class="layui-btn" data-type="reload" id="export" >导出excel</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body">
                            <table class="layui-table layui-form " id="table-data" lay-filter="table-data">


                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /*日期绑定*/
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date1' //指定元素
            //指定元素
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date2' //指定元素
//指定元素
        });
    });
</script>

<script type="text/html" id="bar">
    <button class="layui-btn layui-btn-xs" lay-event="edit" id="edit">查看</button><!--xadmin.open('编辑','articleadd.html','800','510')-->
</script>
<!--状态数据处理-->
<script type="text/html" id="showPayStatus">
    {{#
    var status = null;
    if( d.payStatus ==="0"){
    status = "未支付";
    }else if( d.payStatus ==="1"){
    status = "已支付";
    }
    }}
    <p>{{status}}</p>
</script>
<script type="text/html" id="showOrderType">
    {{#
    var status = d.orderType;
    if( status ==="0"){
    status = "线上";
    }else if( status ==="1"){
    status = "线下";
    }
    }}
    <p>{{status}}</p>
</script>
<script type="text/html" id="showOrderPayType">
    {{#
    var status = d.orderPayType;
    if( status ==="0"){
    status = "在线支付";
    }else if( status ==="1"){
    status = "货到付款";
    }
    }}
    <p>{{status}}</p>
</script>
<script type="text/html" id="showAddrType">
    {{#
    var status = d.addrType;
    if( status ==="0"){
    status = "配送";
    }else if( status ==="1"){
    status = "自提";
    }
    }}
    <p>{{status}}</p>
</script>
<script type="text/html" id="showStatus">
    {{#
    var status = d.status;
    if( status ==="8"){
    status = "待确认";
    }else if( status ==="10"){
    status = "待付款";
    }else if( status ==="20"){
    status = "待备货";
    }else if( status ==="30"){
    status = "备货中";
    }else if( status ==="40"){
    status = "待收货";
    }else if( status ==="45"){
    status = "订单完成(现金支付)";
    }else if( status ==="50"){
    status = "订单关闭";
    }else if( status ==="60"){
    status = "订单完成";
    }else if( status ==="70"){
    status = "交易完成";
    }else if( status ==="90"){
    status = "退款成功";
    }else if( status ==="99"){
    status = "问题订单";
    }
    }}
    <p>{{status}}</p>
</script>
<script type="text/html" id="showSourceFlag">
    {{#
    var status = d.sourceFlag;
    if( status ==="0"){
    status = "pc";
    }else if( status ==="1"){
    status = "android";
    }else if( status ==="2"){
    status = "ios";
    }else if( status ==="3"){
    status = "小程序";
    }else if( status ==="4"){
    status = "微商城";
    }else if( status ==="5"){
    status = "线下";
    }
    }}
    <p>{{status}}</p>
</script>
<script>

    layui.use(['table', 'form'], function(){
        var table = layui.table;
        form = layui.form;

        form.on('select(select-type)', function (obj) {
            userType = obj.value;
        })

        table.on("sort(table-data)",function () {
            // 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
            $(".layui-table-main tr").each(function (index ,val) {
                $($(".layui-table-fixed .layui-table-body tbody tr")[index - 1]).height($(val).height());
            });
        });
        table.render({
            elem: '#table-data'
            // ,id: 'activity-table'
            ,url:'/order/list'
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total,//总数据条数
                    "data": res.data.records //解析数据列表
                };
            }
            ,page: {
                layout: ['prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,current: 1
                ,limit:5
                ,limits:[5, 10, 15,20,200]
                ,groups: 5 //只显示 2 个连续页码
                ,first: "<<" //显示首页
                ,last: ">>" //显示尾页
            },
            height: "full-275"
            ,toolbar
            ,title: '用户数据表'
            // ,width:1400
            // ,totalRow: true
            ,cols: [ [
                {type: 'checkbox'}
                ,{field:'id', title:'序号', width:160, sort: true, align:"center", unresize: true}
                ,{field:'payNo', title:'支付单号', width:160, sort: true, align:"center"}
                ,{field:'orderNo', title:'订单号', width:160, sort: true, align:"center"}
                ,{field:'shopName', title:'店铺名称', width:160, sort: true, align:"center"}
                ,{field:'buyerUserName', title:'收货人', width:160, sort: true, align:"center"}
                ,{field:'payAmount', title:'支付总金额', width:160, sort: true, align:"center"}
                ,{field:'payStatus', title:'支付状态', sort: true, align:"center", width:140,templet:'#showPayStatus'}
                ,{field:'status', title:'订单状态', sort: true, align:"center", width:140,templet:'#showStatus'}
                ,{field:'orderType', title:'订单类型', width:160, sort: true, align:"center",templet:'#showOrderType'}
                ,{field:'orderPayType', title:'支付方式', width:160, sort: true, align:"center",templet:'#showOrderPayType'}
                ,{field:'addrType', title:'配送状态', width:160, sort: true, align:"center",templet:'#showAddrType'}
                ,{field:'sourceFlag', title:'下单来源', width:160, sort: true, align:"center",templet:'#showSourceFlag'}
                ,{field:'payTime', title:'下单时间', width:160, sort: true, align:"center"}
                ,{fixed: 'right', title:'操作', toolbar: '#bar', width:150, align:"center"}
            ] ]
            ,request: {
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'limit' //每页数据量的参数名，默认：limit
            },
            done: function (res, curr, count) {
                // 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
                $(".layui-table-main tr").each(function (index ,val) {
                    $($(".layui-table-fixed .layui-table-body tbody tr")[index - 1]).height($(val).height());
                });
            }
        });
        //搜索
        var $ = layui.$, active = {
            reload: function(){
                payNo = $("#payNo").val();
                orderNo = $("#orderNo").val();
                shopName = $("#shopName").val();
                buyerUserName = $("#buyerUserName").val();
                payStatus = $("#payStatus").val();
                status = $("#status").val();
                orderType = $("#orderType").val();
                orderPayType = $("#orderPayType").val();
                addrType = $("#addrType").val();
                sourceFlag = $("#sourceFlag").val();
                date1 = $("#date1").val();
                date2 = $("#date2").val();
                if (new Date(date1).getTime() > new Date(date2).getTime()) {
                    alert("error")
                } else {
                    var datea = date1
                    var dateb = date2
                }
                //执行重载
                table.reload('table-data', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        payNo: payNo,
                        orderNo: orderNo,
                        shopName: shopName,
                        buyerUserName: buyerUserName,
                        payStatus: payStatus,
                        status: status,
                        orderType: orderType,
                        orderPayType: orderPayType,
                        addrType: addrType,
                        sourceFlag: sourceFlag,
                        date1: datea,
                        date2: dateb
                    },
                    url: '/order/list'
                });
            }
        };

        table.on('tool(table-data)', function (obj) {
            layui.use('layer',function(){
                var layer = layui.layer;
                let name = obj.data.orderNo;
                layer.open({
                    type: 2,
                    title: "编辑",
                    anim: 5,
                    content: "/orderDetail.html?orderNo="+name,
                    area: ['800px', '610px'],
                    success: function(layero, index){
                    },
                })
            })
        });
        $('#selectByLike').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#export').on('click', function(){
            window.location.href="/order/test";
        });


    });
</script>
<script src="../static/layui/excel.js"></script>


</body>
</html>